<template>
  <el-dropdown trigger="click" @command="handleSetSize">
    <span class="el-dropdown-link" style="font-size: 16px">
      <span style="padding-right: 5px">{{ language }}</span>
       <i class="el-icon-arrow-down"/>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="item of languageOptions"
        :key="item"
        :disabled="language === item"
        :command="item"
      >
        {{ item }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: 'LanguageSwitch',
  data() {
    return {
      languageOptions: Object.keys(this.$i18n.messages),
    };
  },
  created() {
    const lang = localStorage.getItem("lang");
    if (this.$yun.stringIsNotEmpty(lang)) {
      this.$i18n.locale = lang
    }
  },
  computed: {
    language() {
      return this.$i18n.locale;
    },
  },
  methods: {
    handleSetSize(language) {
      localStorage.setItem("lang", language);
      this.$i18n.locale = language;
      this.$message({
        message: '切换成功',
        type: "success",
      });
    },
  },
};
</script>
